<template>
  <div class="content">
    <Tabs :value="customType" type="card" @on-click="tabClick">
      <TabPane label="线索客户" name="0"></TabPane>
      <TabPane label="到访客户" name="1"></TabPane>
    </Tabs>
    <!-- <div class="topRecord">
      <div class="record1">
        <p v-for="(item,index) in topRocerd" :key="index"
          :class="{'curr':topRocerdActive==index,'curr2':item.key=='leaveUserIdDealSum'&& topRocerdData.leaveUserIdSum>0}"
          @click="topRocerdClick(item,index)">
          <span>{{topRocerdData[item.key]}}</span><em>{{item.numText}}</em>
        </p>
      </div>
    </div> -->
    <customTopListVue
      :fromType="fromType"
      :topRocerdData="topRocerdData"
      :showRight="false"
      @getClickData="getClickData" />
    <div class="handles">
      <!-- <Button type="primary" v-if="unlocking('0101050300')"
        @click="getExportData">查看导出记录</Button> -->
      <Button type="primary" v-if="unlocking('0101050100')" @click="onAllot">分配客户</Button>
      <Button type="primary" v-if="unlocking('0101050200')" @click="assignClueCustomersRecord">
        分配记录
      </Button>
      <!-- <Button type="primary" v-if="unlocking('0101050500')" @click="robRecord">抢客记录</Button> -->
      <Button type="primary" @click="entryRecord" v-if="unlocking('0101050600')">入池记录</Button>
      <Button type="primary" v-if="unlocking('0101050400')" @click="exportData('1')">导出</Button>
      <Button type="primary" v-if="unlocking('0101050300')" @click="exportData('0')">导出Excel</Button>
      <Button type="primary">
        <a
          href="https://images.tospurfang.com/doc/%E5%85%AC%E5%AE%A2%E6%B1%A0%E6%93%8D%E4%BD%9C%E6%8C%87%E5%BC%95.pdf"
          style="color: #fff"
          target="_blank">
          查看操作指引
        </a>
      </Button>
    </div>

    <dt-grid
      ref="table"
      :select="select"
      :columns="columns"
      :page="page"
      :onFetch="onFetch"
      :cell-height="80" />
    <allot-modal ref="allot" @detailsDistributeClue="detailsDistributeClue" />
    <Modal
      v-model="detailsFlag"
      title="客户详情"
      width="80%"
      :styles="{ top: '5%' }"
      :footer-hide="true"
      @on-cancel="markCancel">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage"></preview-image>
  </div>
</template>

<script>
  import allotModal from '../assignCustomersRecord/components/allot-modal.vue'
  import detailPage from '../details.vue'
  import columnOpt from './opt/column'
  import publicCustomerMgr from '@/biz/customer/publicCustomer.js'
  import clueCustomerMgr from '@/biz/customer/clueCustomer.js'
  import customerOptMgr from '@/biz/customer/customerOpt.js'
  import userMgr from '@/biz/user'
  import customTopListVue from '@/components/customTopList.vue'
  import customerMgr from '@/biz/customer/customer'
  import allotColumnOpt from '../assign/opt/allotColumn'
  import receiverMgr from '@/biz/receiver/receiver'
  export default {
    components: {
      allotModal,
      detailPage,
      customTopListVue
    },
    data() {
      return {
        showIndex: 0,
        preViewImg: [],
        clickKey: '',
        queryType: null, // 上方筛选列表类型
        fromType: 'publicClue',
        customType: '0', // 顶部tab类型
        sourcedata: [],
        targetdata: [],
        topRocerdData: {},
        // topRocerd: [
        //   { key: 'totalCustomerSum', numText: '全部客户' },
        //   { key: 'invalidCustomerSum', numText: '无效客户' },
        //   {
        //     key: 'leaveUserIdSum',
        //     numText: '离案顾问客户'
        //   },
        //   { key: 'leaveUserIdDealSum', numText: '离案顾问成交客户' }
        // ],

        isEffectiveatistics: '',

        topRocerdActive: null,
        page: {
          total: 0,
          current: 1
        },

        columns: [],
        list: [],
        params: {},

        userCustomerId: [],
        select: {
          checkbox: {
            checkMethod: ({ row }) => {
              return row.isMaskPhone != 1
            }
          },
          change: (e) => {
            this.tableChange(e)
          }
        },

        popClass: '',
        followUpList: [],
        popLen: 0,

        detailsFlag: false,
        detailsParams: {},

        userMess: userMgr.info()
      }
    },
    async mounted() {
      // clueCustomerMgr.getConsultant()
      clueCustomerMgr.getFilterOptions()
      clueCustomerMgr.getChannel()
      clueCustomerMgr.getArea()
      customerOptMgr.columns() //获取意向等级 客户进度
      // this.columns = columnOpt.options(this)
      this.getColumns()
      this.$refs.table.init(this)
      this.$refs.table.fetch()
    },
    methods: {
      getChangeAttention(val) {
        let params = {
          buildingId: val.buildingId,
          roleId: userMgr.info().role.roleId,
          userCustomerId: val.userCustomerId,
          userId: this.userMess.userId
        }
        customerMgr.changeAttention(params).then((res) => {
          this.$Message.success(res == 1 ? '成功收藏该客户。' : '你取消收藏了该客户。')
          this.$refs.table.fetch()
        })
      },
      lookImg(val) {
        this.preViewImg = val
        this.$refs.preViewImage.show()
      },
      //获取表头
      getColumns() {
        if (this.fromType === 'publicClue') {
          return customerOptMgr.columns(true, 1).then((res) => {
            if (res) {
              this.columns = allotColumnOpt.options(this, res.resArr)
            }
          })
        } else if (this.fromType === 'publicVisit') {
          return customerOptMgr.columns().then((res) => {
            if (res) {
              this.columns = allotColumnOpt.options(this, res.resArr)
            }
          })
        }
      },
      initData() {
        this.$refs.table.fetch()
      },

      // 点击上方筛选列表传值
      getClickData(val) {
        this.queryType = val.queryType
        // this.clickKey = val.queryType ? val.key : ''
        this.clickKey = val.key
        this.$refs.table.fetch()
      },

      // 查看导出记录  下周期做
      getExportData() {},

      tabClick(val) {
        this.$refs.table.clearFilter()
        this.customType = val
        this.queryType = null
        if (val === '0') {
          this.fromType = 'publicClue'
        } else if (val === '1') {
          this.fromType = 'publicVisit'
        }
        this.getColumns()
        this.$refs.table.fetch()
      },

      detailsDistributeClue() {
        this.detailsFlag = false
        this.$refs.table.clearFilter()
        this.$refs.table.fetch()
      },
      // distribution(val) {
      //   this.$refs.allot.show('', '', val)
      // },

      assignClueCustomersRecord() {
        this.$router.push({
          path: '/allCustomersManagement/publicAssignRecord'
        })
      },

      robRecord() {
        this.$router.push({
          path: '/allCustomersManagement/robRecord'
        })
      },

      entryRecord() {
        this.$router.push({
          path: '/allCustomersManagement/entryRecord'
        })
      },

      // 点击统计
      topRocerdClick(data, index) {
        this.userCustomerId = []
        this.isEffectiveatistics = data.key
        if (this.topRocerdActive == index) {
          this.topRocerdActive = null
        } else {
          this.topRocerdActive = index
        }
        this.$refs.table.fetch(true)
      },
      exportData(mask) {
        this.params.buildingId = this.$dt.buildInfo().housesId
        let params = {
          dto: this.params,
          maskCustomerPhone: mask
        }
        if (this.customType === '0') {
          publicCustomerMgr.cluePublicCustomerExport(params)
        } else if (this.customType === '1') {
          publicCustomerMgr.visitPublicCustomerExport(params)
        }
      },
      // exportData() {
      //   publicCustomerMgr.publicCustomerExport(this.params)
      // },
      // 分配线索
      onAllot() {
        // if (this.userCustomerId.length < 1) {
        //   this.$Message.error('请先选择需要分配的线索')
        //   return false
        // } else {
        //   this.$refs.allot.show(this.userCustomerId, '', '', 'public')
        // }
        this.$router.push({
          path: '/allCustomersManagement/publicAssign',
          query: {
            fromPage: this.fromType,
            fromKey: this.clickKey
          }
        })
      },
      tableChange(val) {
        this.userCustomerId = []
        if (val && val.length) {
          this.customerChoosedLength = val.length
          val.forEach((item) => {
            if (item.id) {
              this.userCustomerId.push(Number(item.id))
            }
          })
        } else {
          this.userCustomerId = []
          this.customerChoosedLength = 0
        }
      },

      // 获取统计数据 线索客户头部
      getCount(data) {
        let params = {
          ...data
        }
        if (this.customType === '0') {
          publicCustomerMgr.publicCustomerCount(params).then((res) => {
            this.topRocerdData = res
          })
        } else if (this.customType === '1') {
          publicCustomerMgr.publicCustomerVisitCount(params).then((res) => {
            this.topRocerdData = res
          })
        }
      },
      // 列表数据
      onFetch(data) {
        this.params = data
        this.getCount(this.params)
        if (this.isEffectiveatistics == 'invalidCustomerSum') {
          this.params.idList = this.topRocerdData.invalidCustomerParam
        } else if (this.isEffectiveatistics == 'leaveUserIdDealSum') {
          this.params.idList = this.topRocerdData.leaveUserIdDealParam
        } else if (this.isEffectiveatistics == 'leaveUserIdSum') {
          this.params.idList = this.topRocerdData.leaveUserIdParam
        } else {
          delete this.params.idList
        }
        this.params.queryType = this.queryType
        if (this.customType === '0') {
          return publicCustomerMgr.publicCustomerList(data).then((res) => {
            this.page.total = res.total
            res.records &&
              res.records.forEach((item) => {
                if (item.featurePhoto) {
                  item.featurePhoto = item.featurePhoto.split(',')
                } else {
                  item.featurePhoto = []
                }
              })
            return res.records
          })
        } else if (this.customType === '1') {
          return publicCustomerMgr.publicCustomerVisitList(data).then((res) => {
            this.page.total = res.total
            res.records &&
              res.records.forEach((item) => {
                if (item.featurePhoto) {
                  item.featurePhoto = item.featurePhoto.split(',')
                } else {
                  item.featurePhoto = []
                }
              })
            return res.records
          })
        }
      },

      // 查看详情
      viewClick(row) {
        console.log('123123', row)
        if (this.customType == '0') {
          this.detailsFlag = true
          this.detailsParams = {
            flag: 'clue',
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            userId: row.userId,
            buildingId: this.$dt.buildInfo().housesId,
            cityCode: this.$dt.buildInfo().cityId
          }
        } else {
          this.detailsFlag = true
          this.detailsParams = {
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            buildingId: row.buildingId,
            userId: row.userId,
            buildingId: this.$dt.buildInfo().housesId,
            cityCode: this.$dt.buildInfo().cityId
          }
        }

        // this.detailsFlag = true
        // this.detailsParams = {
        //   flag: rows.customerType == 1 ? 'clue' : '',
        //   customerId: rows.customerId,
        //   userCustomerId: rows.userCustomerId,
        //   userId: rows.userId,
        //   buildingId: this.$dt.buildInfo().housesId,
        //   cityCode: this.$dt.buildInfo().cityId,

        // }
      },
      markCancel() {
        this.detailsFlag = false
      },
      markCancel() {
        this.detailsFlag = false
      },
      // 查询电话
      getCallList(val) {
        this.callPopLoading = true
        this.callPopClass = ''
        this.callList = []
        receiverMgr.callRecordList({ userCustomerId: val.userCustomerId }).then((res) => {
          this.callPopLoading = false
          this.callList = res.records
        })
      },
      // 查询跟进记录
      getFollowUp(val) {
        this.popLoading = true
        this.popClass = ''
        this.followUpList = []
        this.popLen = 0
        clueCustomerMgr
          .follow({
            page: 1,
            rows: 10,
            userCustomerId: val.userCustomerId,
            category: '4,12',
            customerId: val.customerId
          })
          .then((res) => {
            this.followUpList = res.records
            this.popLen = res.total
            this.updateFollow(val)
            this.popLoading = false
          })
      },

      // 更新跟进记录
      updateFollow(val) {
        clueCustomerMgr
          .updateFollow({
            userCustomerId: val.userCustomerId,
            customerId: val.customerId,
            category: '4'
          })
          .then((res) => {
            if (String(res) == 'true') {
              val.newNews = 2
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;

    .topRecord {
      display: flex;
      flex-direction: row;

      .record1 {
        display: flex;
        flex-direction: row;
        cursor: pointer;

        p {
          text-align: center;
          padding: 0 20px;

          span {
            display: block;
            font-size: 20px;
            font-weight: bold;
            color: #000;
          }

          em {
            display: block;
            font-style: normal;
          }
        }

        p:first-child {
          border-right: 1px #ccc solid;
        }

        p.curr2 {
          span {
            color: red;
            font-weight: bold;
          }
        }

        p.curr {
          span {
            color: #2d8cf0;
            font-weight: bold;
          }
        }
      }

      .recordBtn {
        padding-left: 20px;

        p {
          span {
            color: #2db7f5;
          }
        }
      }
    }

    .retainClass {
      margin-top: 20px;
    }
  }

  .handles {
    display: flex;

    align-items: center;
    margin-bottom: 10px;
    justify-content: flex-end;

    > * {
      margin-left: 10px;
    }
  }

  .footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }
</style>
